var cpage = 0;
function era_hot_shop_top10(p) {
    showTableAndEcharts();
    stopColor();
    isFlag = true;


    cpage = p;

    //把数据加载到表格显示
    era_hot_shop_top10_table();
    //把数据加载到图表
    era_hot_shop_top10_echart();
}



function era_hot_shop_top10_table() {
    //查询数据到表格显示
    $.ajax({
        method: "POST",
        url: "eraHotShopTop10ByPage",
        data: {
            page: cpage
        },
        success: function (data) {
            $("#tip").html("<h3>各年代热门商品Top10表格</h3>");
            $("#echart-tip").html("<h3>各年代热门商品Top10图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>年份</th><th>商品ID</th><th>商品名</th><th>浏览量</th><th>加入购物车量</th><th>购买量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            $.each(jsonArr, function (index, eraHotShop) {
                if (index % 2 == 0) {
                    $("tbody").append("<tr class='active'><td>"+eraHotShop.id+"</td><td>"+eraHotShop.era+"</td><td>"
                        +eraHotShop.sid+"</td><td>"+eraHotShop.sname+"</td><td>"+eraHotShop.viewCount+
                        "</td><td>"+eraHotShop.cartCount+"</td><td>"+eraHotShop.parchaseCount+"</td></tr>")
                } else {
                    $("tbody").append("<tr class='info'><td>"+eraHotShop.id+"</td><td>"+eraHotShop.era+"</td><td>"
                        +eraHotShop.sid+"</td><td>"+eraHotShop.sname+"</td><td>"+eraHotShop.viewCount+
                        "</td><td>"+eraHotShop.cartCount+"</td><td>"+eraHotShop.parchaseCount+"</td></tr>")
                }
            });

            $("tbody tr").on("mouseenter", this, function() {
                color = $(this).attr("class");
                $(this).removeClass(color);
                $(this).addClass("success");
            });
            $("tbody tr").on("mouseleave", this, function() {
                $(this).removeClass("success");
                $(this).addClass(color);
            });

            //循环获取分页的页数
            var pages = 0;
            $.ajax({
                method: "POST",
                url: "getEraHotShopTop10Pages",
                success: function (data) {
                    pages = data;

                    //添加分组组件
                    var page = "<tr><td colspan='7'>";
                    page += "<nav aria-label='Page navigation'>";
                    page += "<ul class='pagination'>";
                    page += "<li>";
                    if (cpage > 1) {
                        page += "<a href='javascript:era_hot_shop_top10("+(cpage - 1)+")' aria-label='Previous'>";
                    } else {
                        page += "<a href='javascript:era_hot_shop_top10(1)' aria-label='Previous'>"
                    }
                    page += "<span aria-hidden='true'>&laquo;</span>";
                    page += "</a>";
                    page += "</li>";

                    //只显示10个分页
                    if (pages <= 10) {
                        for (var i = 1; i<=pages; i++) {
                            if (cpage == i) {
                                page += "<li class='active'><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                            } else {
                                page += "<li><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"</a></li>"
                            }
                        }
                    } else {
                        if (cpage <= 6) {
                            for (var i = 1; i<=10; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"</a></li>"
                                }
                            }
                        } else if (cpage > 6 && (cpage+4) <= pages) {
                            for (var i = cpage-5; i<=cpage+4; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"</a></li>"
                                }
                            }
                        } else {
                            for (var i = cpage-9; i<=cpage; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:era_hot_shop_top10("+i+")'>"+i+"</a></li>"
                                }
                            }
                        }
                    }


                    page += "<li>";

                    if (cpage < pages) {
                        page += "<a href='javascript:era_hot_shop_top10("+(cpage+1)+")' aria-label='Next'>"
                    } else {
                        page += "<a href='javascript:era_hot_shop_top10("+pages+")' aria-label='Next'>"
                    }

                    page += "<span aria-hidden='true'>&raquo;</span>";
                    page += "</a>";
                    page += "</li>";
                    page += "</ul>";
                    page += "</nav>";
                    page += "</td></tr>";
                    $("tbody").append(page);
                    $("tbody tr:last-child td").css("text-align", "center")
                }
            });
        }
    })
}


function era_hot_shop_top10_echart() {

    $.ajax({
        method: "POST",
        url: "eraHotShopTop10",
        success: function (data) {
            var jsonArr = JSON.parse(data);

            //用图表显示数据
            var era_shopNames = [];
            var shopNames = [];
            var era_viewCounts = [];
            var viewCounts = [];
            var era_cartCounts = [];
            var cartCounts = [];
            var era_parchaseCounts = [];
            var parchaseCounts = [];

            var eras = [];
            $.each(jsonArr, function (index, hotShop) {
                //每个年代显示为一个图表
                //每个年代对应有10个商品
                shopNames.push(hotShop.sname);
                viewCounts.push(hotShop.viewCount);
                cartCounts.push(hotShop.cartCount);
                parchaseCounts.push(hotShop.parchaseCount);
                if (index % 10 == 9) {
                    eras.push(hotShop.era);
                    era_shopNames.push(shopNames);
                    shopNames = [];
                    era_viewCounts.push(viewCounts);
                    viewCounts = [];
                    era_cartCounts.push(cartCounts);
                    cartCounts = [];
                    era_parchaseCounts.push(parchaseCounts);
                    parchaseCounts = []
                }
            });
            console.log(era_shopNames);
            console.log(era_viewCounts);
            console.log(era_cartCounts);

            //清空原来图表的div
            $("#dataEcharts div:gt(0)").remove();
            for (var i = 0; i< era_shopNames.length; i++) {
                $("#dataEcharts").append('<div id='+'"main'+eras[i]+'" style="height: 800px"></div>');

                //加载自己的图表的div
                var myChart = echarts.init(document.getElementById('main' + eras[i]));
                var option = {
                    title: {
                        text: eras[i] + '年代热门商品top10统计结果'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['浏览量', '加入购物车量', '销量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: era_shopNames[i],
                        axisLabel: {
                            interval: 0,
                            rotate: -45
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '浏览量',
                        type: 'line',
                        stack: 'Total',
                        data: era_viewCounts[i]
                    }, {
                        name: '加入购物车量',
                        type: 'line',
                        stack: 'Total',
                        data: era_cartCounts[i]
                    }, {
                        name: '销量',
                        type: 'line',
                        stack: 'Total',
                        data: era_parchaseCounts[i]
                    }]
                };
                myChart.setOption(option);


            }
        }

    })
}